<template>
  <view>
    <view class="info-box">
      <view class="title">
        福利待遇
      </view>
      <view v-if="clientType === 'enterprise'">
        <view v-for="(item, index) in fuLiAll.fdfl">
          <view>{{item.remark}}</view>
          <view class="flex flex-wrap gap-20rpx mt-24rpx">
            <view class="flex " v-for="(items, index) in item.value">
              <view v-if="typeof items.value === 'object'" class="flex gap-20rpx items-center">
                <view
                  v-for="ite in items.value"
                  class="bg-#e3e6e9 px-16rpx py-8rpx rounded-20rpx"
                  :class="ite.active ? 'bg-#E1E3fd color-#09f' : 'bg-#e3e6e9'"
                  @click="getTab(items,ite, 'more')">{{ite.value}}</view>
              </view>
              <view
                v-else
                :class="items.active ? 'bg-#E1E3fd color-#09f' : 'bg-#e3e6e9'"
                class="flex px-16rpx py-8rpx rounded-20rpx" @click="getTab(item, items)">{{items.value}}</view>
            </view>
          </view>
        </view>
        <view v-for="item in fuLiAll.jj" class="mt-24rpx">
          <view>{{item.remark}}</view>
          <view class="flex flex-wrap gap-20rpx mt-24rpx">
            <view
              v-for="ite in item.value" class="bg-#e3e6e9 px-16rpx py-8rpx rounded-20rpx"
              :class="ite.active ? 'bg-#E1E3fd color-#09f' : 'bg-#e3e6e9'"
              @click="getTab(item, ite)">
              {{ite.value}}
            </view>
          </view>
        </view>
        <view class="title my-24rpx">
          生活关怀类
        </view>
        <view class="flex items-start mt-24rpx" v-for="item in fuLiAll.shgh">
          <view class="w-120rpx">
            <view v-if="item.field === 'shgh_yi'">医</view>
            <view v-if="item.field === 'shgh_shi'">食</view>
            <view v-if="item.field === 'shgh_zhu'">住</view>
            <view v-if="item.field === 'shgh_xing'">行</view>
            <view v-if="item.field === 'shgh_yu'">娱乐</view>
            <view v-if="item.field === 'shgh_buchong'">补充</view>
            <view v-if="item.field === 'shgh_xuexi'">学习/成长</view>
          </view>
          <view class="flex flex-wrap gap-20rpx flex-1">
            <view
              v-for="ite in item.value"
              class="bg-#e3e6e9 px-16rpx py-8rpx rounded-20rpx"
              :class="ite.active ? 'bg-#E1E3fd color-#09f' : 'bg-#e3e6e9'"
              @click="getTab(item, ite)"
            >{{ite.value}}</view>
          </view>
        </view>
      </view>
<!--      用户-->
      <view class="flex flex-wrap gap-20rpx" v-else>
        <view
          v-for="(item, index) in infoDetail.highlights"
          :key="index"
          class="h-[54rpx] flex items-center justify-center rounded-[28rpx] bg-#fff3e8 px-24rpx text-[24rpx] text-[#fd8b25]"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <up-gap height="30rpx" />
    <view class="info-box">
      <view class="title">
        政府补贴
      </view>
      <view>
        <view
          v-for="(item, index) in infoDetail.subsidys"
          :key="index"
          class="flex items-center b-b-2rpx b-b-#f6f6f6 b-b-solid py-30rpx text-[26rpx] leading-36rpx"
        >
          <view class="w-260rpx shrink-0 pr-30rpx text-[#1d2129]">
            {{ item.label }}
          </view>
          <view class="flex-auto text-[#4e5969]">
            <u-input placeholder="请输入" v-model="item.value" v-if="clientType === 'enterprise'" @blur="updateInfos"/>
            <view v-else>{{ item.value }}</view>
          </view>
        </view>
      </view>
    </view>
    <up-gap height="30rpx" />
    <view class="info-box">
      <view class="title">
        人才培养
      </view>
<!--      <u-textarea v-if="clientType === 'enterprise'" v-model="infoDetail.personnel_training" min-height="200rpx" />-->
      <view class="content text-left text-[26rpx] text-[#4e4e4e] leading-62rpx" v-html="infoDetail.personnel_training"></view>
    </view>
    <up-gap height="30rpx" />
    <view>
      <view class="title px-24rpx">
        公司荣誉
      </view>
      <view class="flex flex-wrap justify-between gap-22rpx">
        <up-image width="340rpx" height="220rpx" radius="10rpx"
        v-for="ite in infoDetail.honor"
        :src="ite"/>
<!--        <up-upload-->
<!--          v-if="clientType === 'enterprise'"-->
<!--          :file-list="fileList" name="6"-->
<!--          multiple :max-count="1"-->
<!--          width="250" height="150" @after-read="afterRead" @delete="deletePic">-->
<!--          <view class="h-[220rpx] w-[340rpx] flex flex-col items-center justify-center border-[2rpx] border-[#999999] rounded-[16rpx] border-dashed">-->
<!--            <up-icon name="photo" size="50rpx" color="#999999" />-->
<!--            <text class="mt-6rpx text-26rpx color-#999999">-->
<!--              点击上传-->
<!--            </text>-->
<!--          </view>-->
<!--        </up-upload>-->
      </view>
    </view>
    <up-gap height="30rpx" />
    <view>
      <view class="title px-24rpx">
        师哥师姐说
      </view>
      <video width="100%" height="320rpx" radius="10rpx"
      :src="infoDetail.seniors_say"
      controls
      :poster="infoDetail.seniors_say_img"
      ></video>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';
import {configHighlights} from '@/api/user/index'

const clientType = uni.getStorageSync('clientType');;
const emit = defineEmits(['updateHeightDian'])
const list1 = ref(['五险一金', '带薪年假', '法定节假日', '压片机', '免费住房']);
const list2 = ref([
  {
    label: '基层就业补贴',
    value: '内容内容内容',
  },
  {
    label: '住房补贴',
    value: '内容内容内容',
  },
  {
    label: '面试补贴',
    value: '内容内容内容',
  },
  {
    label: '人才购房补贴',
    value: '内容内容内容',
  },
]);
const fileList = ref([]);
const afterRead = () => { };
const deletePic = () => { };
const props = defineProps({
  isreferral: {
    type: Boolean,
    default: false,
  },
  companyInfo: {
    type: Object,
  },
  infoDetail: {
    type: Array,
    default: () => [{
      id: 0,
      highlights: [],
      subsidys: [],
      personnel_training: '',
      honor: [],
      seniors_say: '',
      seniors_say_img: ''
    }],
  }
});
const fuLiAll = ref({})
const getConfigHighlights = () => {
  configHighlights().then(res => {
    if(res) {
       fuLiAll.value = res
        resetDate(res)
    }
  })
}

const resetDate = (data) => {
  data.fdfl.map(v => {
    v.value.map(vi => {
      if(typeof vi.value === 'object') {
        if(props.infoDetail.label_statutory_benefits) {
          props.infoDetail.label_statutory_benefits.map(vo => {
            vi.value.map(vj => {
              if(vj.value === vo) {
                vj.active = true
              }
            })
          })
        }
      }else {
        props.infoDetail.label_statutory_benefits.map(vx => {
          if(vx === vi.value) {
            vi.active = true
          }
        })
      }
    })
  })
  data.jj.map(v => {
    v.value.map(va => {
      props.infoDetail.label_bonus.map(vo => {
        if(vo === va.value) {
          va.active = true
        }
      })
    })
  })
  console.log('-=-=-=', data.shgh, props.infoDetail.label_medical_care)
  data.shgh.map(v => {
    // 医
    if(v.field === 'shgh_yi' && props.infoDetail.label_medical_care.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_medical_care.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    // 食
    if(v.field === 'shgh_shi' && props.infoDetail.label_food.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_food.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    //  住
    if(v.field === 'shgh_zhu' && props.infoDetail.label_live.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_live.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    // 行
    if(v.field === 'shgh_xing' && props.infoDetail.label_go.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_go.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    // 娱乐
    if(v.field === 'shgh_yu' && props.infoDetail.label_entertainment.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_entertainment.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    //成长
    if(v.field === 'shgh_xuexi' && props.infoDetail.label_grow_up.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_grow_up.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
    //成长
    if(v.field === 'shgh_buchong' && props.infoDetail.label_supplement.length > 0) {
      v.value.map(vx => {
        props.infoDetail.label_supplement.map(va => {
          if(va === vx.value) {
            vx.active = true
          }
        })
      })
    }
  })
}

const getTab = (item,activeItem, more) => {
  if(more) {
    item.value.map(v => {
      if(v.value === activeItem.value) {
        item.value.map(vi => vi.active = false)
        v.active = true
      }
    })
  }else {
    item.value.map(v => {
      if(v.value === activeItem.value) {
        v.active = !v.active
      }
    })
  }
  emit('updateDetails', {value: fuLiAll.value})
}
const updateInfos = () => {
  emit('updateDetails', {value: fuLiAll.value})
}
onMounted(() => {
  getConfigHighlights()
})
</script>

<style scoped lang="scss">
.title {
  @apply mb-24rpx text-[26rpx] text-[#1d2129] leading-[36rpx] font-600;
}

.info-box {
  @apply rounded-[20rpx] bg-#fff p-24rpx shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191,191,191,0.26)];
}
</style>
